<!-- 角色管理页面 -->




<table class="table table-hover" id="user_table">
    <thead>
        <td>序号</td>
        <td>角色名称</td>
        <td>操作</td>
    </thead>
    <tbody></tbody>
</table>

<!-- 资讯Modal -->
<div class="modal fade" id="userModal" tabindex="-1" user="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" user="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div>
                    <b>角色名称:</b>
                    <input class="form-control" type="text" name="name">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="user_submit">更新</button>
            </div>
        </div>
    </div>
</div>

<script>
    var user;
    var page = 1; //设置起始页
    var pageSize = 10; //设置每页信息数量

    //封装查询请求
    function userget(res) {
        // alert(res.user)
        //清空tbody
        $('#user_table tbody').empty();
        res.data.forEach(function(item, index) {
            //item-->每个用户对象
            var newTr = $(`                    
                    <tr>
                        <td>${index + 1}</td>
                        <td>${item.name}</td>
                        <td>
                        <button data-id="${item.id}" class="btn btn-danger" id="user_delete">移除</button>
                        <button data-id="${item.id}" class="btn btn-info" id="user_power">授权</button>
                        <button data-item='${JSON.stringify(item)}' class="btn btn-default" id="user_update" data-toggle="modal" data-target="#userModal">修改</button>
                        </td>
                    </tr>`);
            $('#user_table tbody').append(newTr)

        })
    }

    // 查询第一页资讯
    function usermsgget() {
        $.get(baseURL + '/role/cascadePrivilegeFindAll', function(res) {
            userget(res);
        });
    }
    usermsgget();

    //修改功能事件代理 id="user_update"
    $('#user_table tbody').on('click', '#user_update', function() {
        // console.log(user);
        user = $(this).attr('data-item');
        user = JSON.parse(user);
        console.log(user);
        $('input[name=name]').val(user.name);
        //设置模态框标题
        $('.modal-title').html('修改角色名称')
    });

    //新增修改提交按钮  新增:保存数据  修改:更新数据   传id代表修改,不传id代表新增
    $("#user_submit").click(function() { //给后加的节点绑定事件
        //获取用户输入的信息
        var name = $('input[name=name]').val();
        var id = user.id;
        console.log(id, name);
        //访问后台接口,保存到数据库,保存成功之后刷新数据
        $.post(baseURL + '/role/saveOrUpdate', {
            id: id,
            name: name,
        }, function(res) {
            console.log(res);
            //提示保存成功
            if (res.status == 200) {
                // alert('保存成功');
                usermsgget();

            }
        });
        $("#userModal").modal("hide")
        $('.modal-backdrop').remove(); //去掉遮罩层
    })

    //移除功能,事件代理 id="user_delete"
    $('#user_table tbody').on('click', '#user_delete', function() {
        // console.log(this);
        //获取data-id值 attr
        //attr('name','test') prop()
        var id = $(this).attr('data-id');
        // console.log(id);
        if (confirm('确认删除?')) {
            $.get(baseURL + '/role/deleteById', {
                id: id
            }, function(res) {
                console.log(res);
                usermsgget();
            });
        }
    });

    //授权功能,事件代理,id="user_power"
    $('#user_table tbody').on('click', '#user_power', function() {
        //获取data-id值 attr
        //attr('name','test') prop()
        var id = $(this).attr('data-id');
        $.post(baseURL + '/article/findById', {
            id: id,
            privileges: privileges
        }, function(res) {
            console.log(res);
        })
    })
</script>